<template>
  <view class="content">
    <u-toast ref="loginToast" />
    <view class="title">车辆定位轨迹系统</view>
    <view class="form_con">
      <u-form :model="loginFrom" ref="loginFromRef">
        <u-form-item left-icon="account-fill" prop="username">
          <u-input
              placeholder="请输入用户名"
              border="border"
              v-model="loginFrom.username"/>
        </u-form-item>
        <u-form-item left-icon="lock-fill" prop="password">
          <u-input
              placeholder="请输入密码"
              border="border"
              v-model="loginFrom.password"
              type="password"
              :password-icon="true"/>
        </u-form-item>
      </u-form>
      <view class="login_btn">
        <u-button
            @click="loginHandler"
            :loading="aloading"
            :ripple="true"
            type="primary"
            shape="circle"
        >登录a</u-button
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts">

import Vue from "vue";
export default Vue.extend<any,any,any>({
  data() {
    return {
      aloading: Boolean,
      loginFrom: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change','blur'],
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change','blur'],
          }
        ]
      }
    };
  },
  onReady() {
    (this.$refs.loginFromRef as any).setRules(this.rules);
  },
  onLoad() {
    this.aloading = false
  },
  methods: {
    loginHandler() {
      
    }
  }
});
</script>

<style lang="scss" >
page {
  width: 100%;
  height: 100%;
}
.login_btn {
  margin-top: 100rpx;
}
.title {
  color: #4789ff;
  font-size: 2em;
  font-weight: bold;
}
.form_con {
  margin-top: 50rpx;
}
.content {
  width: 100%;
  height: 100%;
  background: url();
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
